<template>
	<Content :style="{padding: '0 16px 16px'}">

		<Breadcrumb :style="{margin: '20px 0'}">
			<BreadcrumbItem>
				<router-link to="/admin/aritlce">文章管理</router-link>
			</BreadcrumbItem>
			<BreadcrumbItem>发表文章</BreadcrumbItem>
		</Breadcrumb>
		<Card>
			<Form :model="formItem" :label-width="80" style="padding-top: 40px;">
				<Row>
					<Col :xs="20" :sm="{ span: 20, offset: 3 }" :md="{ span: 8, offset: 2 }" :lg="6">
					<FormItem label="标题：">
						<Input v-model="formItem.username" placeholder="请输入用户名" style="width: 300px"></Input>
					</FormItem>
					<FormItem label="昵称：">
						<Input v-model="formItem.nickname" placeholder="请输入用户昵称" style="width: 300px"></Input>
					</FormItem>
					<FormItem label="类型：">
						<RadioGroup v-model="formItem.type">
							<Radio label="1">技术分享</Radio>
							<Radio label="2">生活点滴</Radio>
							<Radio label="3">更新公告</Radio>
						</RadioGroup>
					</FormItem>
					<FormItem label="发表：">
						<i-switch v-model="formItem.switch" size="large">
							<span slot="open">发表</span>
							<span slot="close">保存</span>
						</i-switch>
					</FormItem>
					</Col>
					<Col :xs="20" :sm="{ span: 20, offset: 3 }" :md="{ span: 8, offset: 5 }" :lg="6">
					<FormItem label="封面：">
						<Upload style="width:300px;" multiple type="drag" action="//jsonplaceholder.typicode.com/posts/">
							<div style="padding: 20px 0;">
								<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
								<p>请选择文章封面</p>
							</div>
						</Upload>
					</FormItem>
					<div>

					</div>

					<FormItem label="概述:">
						<Input style="width:300px;" v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
						 placeholder="请输入文章概述"></Input>
					</FormItem>
					</Col>
					<Col :xs="20" :sm="{ span: 20, offset: 3 }" :md="{ span: 20, offset: 2 }" :lg="20">
					<FormItem label="正文：" class="editor">

					</FormItem>
					</Col>

					<Col :xs="{ span: 20, offset: 5 }" :sm="{ span: 20, offset: 7 }" :md="{ span: 20, offset: 10 }" :lg="{ span: 20, offset: 10 }">
					<FormItem>
						<Button type="primary">提交</Button>
						<Button style="margin-left: 8px">取消</Button>
					</FormItem>
					</Col>
				</Row>
			</Form>

		</Card>
	</Content>


</template>
<style scoped>
	@media(min-width:0px) and (max-width:768px) {
		.editor {
			width: 386px;
		}
	}

	@media(min-width:768px) and (max-width:992px) {
		.editor {
			width: 386px;
		}
	}
</style>
<script>
	export default {
		data() {
			return {
				formItem: {
					username: '',
					nickname: '',
					type: '1',
					role: 'user',
					switch: true,
					textarea: ''
				}
			}
		},
		mounted: function() {
		}
	}
</script>
